<script setup>
import { fontWeight, labelPosition } from "@/utils/dict"

const props = defineProps(["options"])
const option = toRef(props, "options")
</script>

<template>
  <div class="border-dotted border-2 p-1 rounded mb-1">
    <a-form auto-label-width>
      <a-form-item label="显示标签">
        <xiri-form v-model="option.show" option="switch" />
      </a-form-item>
      <template v-if="option.show">
        <a-form-item label="标签位置">
          <xiri-form v-model="option.position" option="select" :optionList="labelPosition" />
        </a-form-item>
        <a-form-item label="元素距离">
          <xiri-form v-model="option.distance" option="number" />
        </a-form-item>
        <a-form-item label="标签角度">
          <xiri-form v-model="option.rotate" option="number" />
        </a-form-item>
        <a-form-item label="标签颜色">
          <xiri-form v-model="option.color" option="color" />
        </a-form-item>
        <a-form-item label="字体大小">
          <xiri-form v-model="option.fontSize" option="number" />
        </a-form-item>
        <a-form-item label="字体粗细">
          <xiri-form v-model="option.fontWeight" option="select" :optionList="fontWeight" />
        </a-form-item>
      </template>
    </a-form>
  </div>
</template>

<style scoped lang="less"></style>
